<template>
  <el-card>
    <template #header>
      <el-row>
        <el-col :span="12" align="left">
          <span>MENUS</span>
        </el-col>
        <el-col :span="12" align="right">
          <el-button type="primary" @click="showDialog('add', null)">新增菜单</el-button>
        </el-col>
      </el-row>
    </template>
    <el-table :data="that.tableData" stripe border height="calc(100vh - 130px)" row-key="menuId" style="width: 100%">
      <el-table-column label="层级" width="200px" fixed="left">
        <template #default="scope"><span class="level"><i></i>{{ scope.$index }}</span></template>
      </el-table-column>
      <el-table-column prop="userId" label="ID" width="350">
        <template #default="scope">
          <p>UserId：{{ scope.row.userId }}</p>
          <p>MenuId：{{ scope.row.menuId }}</p>
          <p>ParentId：{{ scope.row.parentId || '顶级' }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200" align="center"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="iconType" label="图标类型"></el-table-column>
      <el-table-column label="图标" align="center" width="50px">
        <template #default="scope">
          <template v-if="scope.row.iconType === 1">
            <el-link type="primary" :href="viewFile({fileId: scope.row.icon}) + '?t=' + Date.now()" target="_blank">
              <el-image :src="viewFile({fileId: scope.row.icon}) + '?t=' + Date.now()" style="width: 20px"></el-image>
            </el-link>
          </template>
          <template v-if="scope.row.iconType === 0">
            <i :class="scope.row.icon"></i>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="seq" label="排序"></el-table-column>
      <el-table-column label="操作" fixed="right" width="200px" align="center">
        <template #default="scope">
          <el-button type="text" @click="showDialog('add', scope.row)">新增</el-button>
          <el-button type="text" @click="showDialog('modify', scope.row)">编辑</el-button>
          <el-button type="text" class="color-danger" @click="del(scope.row)">删除</el-button>
          <el-button type="text" @click="up(scope.row)">上移</el-button>
          <el-button type="text" @click="down(scope.row)">下移</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!--新增/编辑菜单-->
  <el-dialog :title="dialogTitle" v-model="that.dialogVisible" top="50px" width="400px">
    <el-form :model="that.f" label-width="80px">
      <el-form-item label="创建时间">
        <el-date-picker v-model="that.f.createTime" type="date" disabled style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="UserId">
        <el-input v-model="that.f.userId" disabled></el-input>
      </el-form-item>
      <el-form-item label="MenuId">
        <el-input v-model="that.f.menuId" disabled></el-input>
      </el-form-item>
      <el-form-item label="ParentId">
        <el-input v-model="that.f.parentId" disabled></el-input>
      </el-form-item>
      <el-form-item label="菜单排序">
        <el-input v-model="that.f.seq" disabled></el-input>
      </el-form-item>
      <el-form-item label="菜单名称">
        <el-input v-model="that.f.name"></el-input>
      </el-form-item>
      <el-form-item label="图标类型">
        <el-select v-model="that.f.iconType" style="width: 100%;">
          <el-option label="字体图标" :value="0"></el-option>
          <el-option label="图片图标" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图标上传" v-if="that.f.iconType === 1">
        <el-upload action="#" :http-request="httpRequest" :show-file-list="false">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="图标">
        <el-input v-model="that.f.icon" :disabled="that.f.iconType === 1"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" v-if="that.f_status === 'add'" @click="add">新增</el-button>
      <el-button type="primary" v-if="that.f_status === 'modify'" @click="modify">修改</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive, getCurrentInstance, computed} from "vue";
import {menuAdd, menuDel, menuDown, menuInfo, menuList, menuModify, menuUp, preview, upload} from "../../assets/api";


let that = reactive({
  dialogVisible: false,
  f: {
    createTime: '',         // 创建时间
    userId: '',             // 用户ID
    menuId: '',             // 菜单ID
    parentId: '',           // 父ID
    name: '',               // 名称
    iconType: 0,            // 图标类型 0字体图标 1图片图标
    icon: '',               // 图标
    seq: '',                // 排序
  },
  f_status: '',
  tableData: [],
})

/* 树结构整理 */
const handleTree = (arr) => {
  let cloneData = JSON.parse(JSON.stringify(arr)) // 对源数据深度克隆
  return cloneData.filter((father) => {
    let branchArr = cloneData.filter(
        (child) => father.menuId === child.parentId
    ) //返回每一项的子级数组
    branchArr.length > 0 ? (father.children = branchArr) : '' //如果存在子级，则给父级添加一个children属性，并赋值
    return father.parentId === ''; //返回第一层
  })
}

// 重置
const reset = () => {
  that.f = {
    createTime: '',         // 创建时间
    userId: '',             // 用户ID
    menuId: '',             // 菜单ID
    parentId: '',           // 父ID
    name: '',               // 名称
    iconType: 0,            // 图标类型 0字体图标 1图片图标
    icon: '',               // 图标
    seq: '',                // 排序
  }
}

// 删除菜单
const del = (row) => {
  menuDel(row).then(({data}) => {
    list();
  })
}

// 查询单条菜单
const info = (row) => {
  menuInfo(row).then(({data}) => {
    that.f = data;
  })
}

// 编辑
const modify = () => {
  menuModify(that.f).then(({data})=>{
    that.dialogVisible = false;
    list()
  })
}

// 展示弹出层
const showDialog = (mode, row) => {
  if (mode === 'add') {
    reset();
    if (row) {
      that.f.parentId = row.menuId;
    }
  }
  if (mode === 'modify') {
    info(row);
  }
  that.f_status = mode;
  that.dialogVisible = true;
}

// 弹出框表头
const dialogTitle = computed(() => {
  switch (that.f_status) {
    case "add":
      return '新增';
    case "modify":
      return '编辑'
  }
})

// 新增菜单
const add = () => {
  menuAdd(that.f).then(({data}) => {
    that.dialogVisible = false;
    list();
  })
}

// 菜单列表
const list = () => {
  menuList().then(({data}) => {
    that.tableData = handleTree(data);
  })
}


// 上传文件
const httpRequest = (params) => {
  let formData = new FormData();
  formData.append('file', params.file);
  if (that.f.icon) {
    formData.append('fileId', that.f.icon);
  }
  upload(formData).then(({data}) => {
    that.f.icon = data.fileId;
  })
}
// 预览
const viewFile = (row) => {
  return preview(row);
}


// 上移
const up = (row)=>{
  menuUp(row).then(({data})=>{
    list();
  })
}

// 下移
const down = (row)=>{
  menuDown(row).then(({data})=>{
    list();
  })
}

const init = () => {
  list();
}

init();

</script>

<style scoped>
/deep/ .el-table td {
  padding: 0;
}

/deep/ .el-table [class*=el-table__row--level] .el-table__expand-icon {
  margin-right: 0;
}

.level {
  position: relative;
  display: inline-block;
  height: 120px;
  border-left: 5px solid #2980b9;
}

.level i {
  display: inline-block;
  width: 20px;
  height: 5px;
  background-color: #2980b9;
  margin-right: 10px;
}
</style>
